<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<view class="billView">
			<view class="billImageTop">
				河北财政电子票据
			</view>
			<view class="sdImg" v-if="lockList.length>0">
				<u-image mode="widthFix" width="180rpx" src="/static/assets/已锁定.png"></u-image>
			</view>
			<view class="bxImg" v-if="accountList.length>0">
				<u-image mode="widthFix" width="180rpx" src="/static/assets/已报销.png"></u-image>
			</view>
			<view class="statusImg" v-if="detailData.status==8||detailData.status==9">
				<u-image v-if="detailData.status==8" mode="widthFix" width="180rpx"
					src="/static/assets/yhk.png"></u-image>
				<u-image v-if="detailData.status==9" mode="widthFix" width="180rpx"
					src="/static/assets/yzf.png"></u-image>
			</view>
			<view class="zhangImg" v-if="detailData.isblock==1">
				<u-image mode="widthFix" width="180rpx" src="/static/assets/blockChainZhang.png"></u-image>
			</view>
			<view class="billImage">
				<view class="billbgview">
					<view class='leftView'>
						<view class='leftText'>交 款 人</view>
						<view class='billvalue'>{{detailData.payerName}}</view>
					</view>
					<view class='leftView'>
						<view class='leftText'>票据代码</view>
						<view class='billvalue'>{{detailData.einvoiceCode}}</view>
					</view>
					<view class='leftView'>
						<view class='leftText'>票据号码</view>
						<view class='billvalue'>{{detailData.einvoiceNumber}}</view>
					</view>
					<view class='leftView'>
						<view class='leftText'>校 验 码</view>
						<view class='billvalue'>{{detailData.randomNumber}}</view>
					</view>
					<view class='leftView'>
						<view class='leftText'>开票单位</view>
						<view class='billvalue'>{{detailData.agencyName}}</view>
					</view>
					<view class='leftView'>
						<view class='leftText'>开票日期</view>
						<view class='billvalue'>{{detailData.issueDate}}</view>
					</view>
					<view class='leftView'>
						<view class='leftText'>金额</view>
						<view class='billvalue'>{{(detailData.totalAmount).toFixed(2)}}</view>
					</view>
				</view>
			</view>
			<view class="saveBtn" >
				<view class="btnBox" v-if="detailData.isgive==1">
					<u-button text="放入我的票夹" @click="saveBill" type="primary" :disabled="isSaveSuccess"
						shape="circle"></u-button>
				</view>
				<view class="btnBox" v-if="!isHebeiProvince&&detailData.isgive!=1">
					<u-button text="发送至邮箱" @click="showEditModal=true" type="primary" shape="circle"></u-button>
				</view>
			</view>
			<view class="bottomView"></view>
			<u-cell v-if="accountList.length>0" :title="`报销信息`" @click="accountedInfo" :isLink="true"
				arrow-direction="right">
			</u-cell>
			<u-cell v-if="lockList.length>0" :title="`锁定信息`" @click="lockInfo" :isLink="true"
				arrow-direction="right">
			</u-cell>
			<view v-if="isHebeiProvince">
				<u-cell :title="`财政电子票据`" @click="billReview" :isLink="true" arrow-direction="right">
				</u-cell>
				<u-cell :title="`票据二维码`" @click="billQrcode" :isLink="true" arrow-direction="right">
				</u-cell>
				<u-cell v-if="detailData.isblock==1" :title="`区块链`" @click="blockchain" :isLink="true"
					arrow-direction="right">
					<!-- <u-icon slot="icon" name="share-fill" color="#3c9cff" size="25"></u-icon> -->
				</u-cell>
			</view>

		</view>
		<view v-if="result == 9000" class="blackView">
			<text class="blackText">登录后可查看您的票据</text>
			<view class="loginBtn" @click="login">
				<text class="loginText">登录/注册</text>
			</view>
		</view>
		<u-modal ref="editModal" title="发送至邮箱" :show="showEditModal" :mask-close-able="false" :showCancelButton='true'
			@cancel='showEditModal=false' @confirm="postEmail" :close-on-click-modal="false">
			<u-form :model="editData" ref="emailForm">
				<!-- 邮箱输入框 -->
				<u-form-item label="邮箱" borderBottom>
					<u-input v-model="editData.email" placeholder="请输入邮箱"></u-input>
				</u-form-item>
			</u-form>
		</u-modal>
		<u-modal ref="accountedModal" :title="modalTitle" :show="showaccountedModal" :mask-close-able="false"
			@confirm="showaccountedModal=false" :close-on-click-modal="false">
			<scroll-view class="modal-content" scroll-y>
				<view class="bill-list" v-if="modalTitle=='报销信息'">
					<view v-for="(bill, index) in accountList" :key="index" class="bill-item">
						<view class="bill-info">
							<view class="info-row">
								<text class="info-label">报销单位代码</text>
								<text class="info-value">{{ bill.agencyCode }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">报销单位名称</text>
								<text class="info-value">{{ bill.agencyName }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">业务流水号</text>
								<text class="info-value">{{ bill.bizCode }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">会计凭证号</text>
								<text class="info-value">{{ bill.accNumber }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">报销日期</text>
								<text class="info-value">{{ bill.accDate }}</text>
							</view>
							<view class="info-row total-row">
								<text class="info-label">报销总金额</text>
								<text class="info-value amount">￥ {{ bill.accTotalAmount }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bill-list" v-else>
					<view v-for="(lock, index) in lockList" :key="index" class="bill-item">
						<view class="bill-info">
							<view class="info-row">
								<text class="info-label">报销单位代码</text>
								<text class="info-value">{{ lock.agencyCode }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">报销单位名称</text>
								<text class="info-value">{{ lock.agencyName }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">锁定日期</text>
								<text class="info-value">{{ lock.lockDate }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	import {
		postShow,
		postGiveuser,
		postCheckDetail,
		postEinvoiceQrcode,
		crossProQueryEInvoiceDetail,
		sendEmailOut
	} from '@/api/ticketApi.js'
	export default {
		onLoad: function(option) {
			const isIdentification = uni.getStorageSync('isIdentification') || 0 //1已认证，0未认证
			if (option && option.item) { //普通票据跳转
				this.itemData = JSON.parse(decodeURIComponent(option.item))
				console.log(this.itemData); //打印出上个页面传递的参数。
				if (isIdentification == 1) {
					this.crossProQueryEInvoiceDetailFun()
				} else {
					this.postCheckDetailFun()
				}
			}
			if (option && option.qrCodeParams) { //扫码查票跳转
				this.qrCodeParams = option.qrCodeParams || ''
				console.log('qrCodeParams', this.qrCodeParams)
				this.postEinvoiceQrcodeFun(option.qrCodeParams)
			}
			if (option && option.handItem) { //手工查票跳转
				this.detailData = JSON.parse(decodeURIComponent(option.handItem))
			}
			if (option && option.loadItem) { //上传文件跳转
				this.detailData = JSON.parse(decodeURIComponent(option.loadItem))
			}
			if (option && option.q) { //微信扫码跳转
				if (uni.getStorageSync('uid') == '') {
					this.result = 9000
				} else {
					let url = decodeURIComponent(option.q)
					let str = url.split("=");
					console.log('option222url', url)
					this.itemData.einvoiceCode = str[1].split("&")[0]
					this.itemData.einvoiceNumber = str[2].split("&")[0]
					this.itemData.randomNumber = str[3]
					if (this.itemData.einvoiceCode.substring(0, 2) == '13') {
						this.postCheckDetailFun()
					} else {
						uni.$u.toast('只能扫码查询河北省票据');
					}
				}
			}
		},
		data() {
			return {
				editData:{
					email:''
				},
				showEditModal:false,
				result: 0,
				qrCodeParams: '',
				itemData: {},
				isSaveSuccess: false,
				detailData: {
					einvoiceCode: '',
					totalAmount:0,
				},
				modalTitle:'',
				accountList: [], //报销数据列表
				lockList:[],//锁定数据列表
				showaccountedModal: false, //报销信息弹窗
			}
		},
		created() {
			console.log('用户信息', uni.getStorageSync('userInfo'))
			const userInfo = uni.getStorageSync('userInfo')
			this.editData.email = userInfo.email || ''
		},
		computed: {
			isHebeiProvince() { //是否为河北省
				return this.detailData.einvoiceCode.substring(0, 2) == '13'
			},
		},
		methods: {
			//扫码查票时查询票据详情
			async postEinvoiceQrcodeFun(qrCodeParams) {
				uni.showLoading({
					title: '加载中'
				})
				const res = await postEinvoiceQrcode(qrCodeParams)
				console.log('res', res)
				this.result = res.data.result
				if (res.data.result == 0) {
					uni.hideLoading()
					this.detailData = res.data
				} else {
					uni.hideLoading()
					uni.$u.toast(res.data.message || '加载失败');
				}
			},
			//未认证查询票据详情
			async postCheckDetailFun() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await postCheckDetail({
					...this.itemData
				})
				console.log('res', res)
				this.result = res.data.result
				if (res.data.result == 0) {
					uni.hideLoading()
					this.detailData = res.data
				} else {
					uni.hideLoading()
					uni.$u.toast(res.data.message || '加载失败');
				}
			},
			//已认证查询票据详情
			async crossProQueryEInvoiceDetailFun() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await crossProQueryEInvoiceDetail({
					...this.itemData
				})
				console.log('res', res)
				this.result = res.result
				if (res.result == 0) {
					uni.hideLoading()
					this.detailData = {
						...res.eInvoice,
						einvoiceCode: res.eInvoice.eInvoiceCode,
						einvoiceNumber: res.eInvoice.eInvoiceNumber,
						payerName: res.eInvoice.payerPartyName,
						agencyName: res.eInvoice.invoicingPartyName,
						isblock: res.isblock,
						isgive: res.isgive || 0,
						status: res.reversal.isReversal ? 9 : (res.exchangePaper.isExchangePaper ? 8 :
							1) //9已作废8已换开1正常
					}
					this.accountList = res.account.accountList || []
					this.lockList=res.lock.lockList||[]
				} else {
					uni.hideLoading()
					uni.$u.toast(res.message || '加载失败');
				}
			},
			//放入票夹
			async saveBill() {
				if (this.isSaveSuccess) {
					return uni.$u.toast('已挂接到我的票夹');
				}
				uni.showLoading({
					title: '保存中'
				})
				const res = await postGiveuser({
					einvoiceCode: this.detailData.einvoiceCode,
					einvoiceNumber: this.detailData.einvoiceNumber,
					randomNumber: this.detailData.randomNumber
				})
				if (res.data.result == 0) {
					uni.hideLoading()
					uni.$u.toast('挂接成功');
					this.isSaveSuccess = true
					this.detailData.isgive = 0
				} else {
					uni.hideLoading()
					uni.$u.toast(res.data.message || '挂接失败');
				}
			},
			//外省发送邮箱
			async postEmail(){
				console.log('editData',this.editData)
				uni.showLoading({
					title:'发送中'
				})
				const params={
					eInvoiceCode:this.detailData.einvoiceCode,
					eInvoiceNumber:this.detailData.einvoiceNumber,
					randomNumber: this.detailData.randomNumber,
					totalAmount:this.detailData.totalAmount,
					issueDate:this.detailData.issueDate,
					email:this.editData.email
				}
				const res =await sendEmailOut(params)
				if(res.result==0){
					uni.hideLoading()
					this.showEditModal=false
					uni.$u.toast(res.message||'发送成功');
				}else{
					uni.hideLoading()
					uni.$u.toast(res.message||'发送失败');
				}
			},
			//报销信息
			accountedInfo() {
				this.showaccountedModal = true
				this.modalTitle='报销信息'
			},
			//锁定信息
			lockInfo(){
				this.showaccountedModal = true
				this.modalTitle='锁定信息'
			},
			//电子票查看
			billReview() {
				if (Object.keys(this.detailData).length == 0) {
					return
				}
				if (this.detailData.isgive == 1) {
					return uni.$u.toast('放入票夹后可查看电子票');
				}
				uni.navigateTo({
					url: '/pages/ticket/photo?item=' + encodeURIComponent(JSON.stringify(this.detailData))
				})
			},
			billQrcode() {
				if (Object.keys(this.detailData).length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/ticket/billQrcode?item=' + encodeURIComponent(JSON.stringify(this.detailData))
				})
			},
			blockchain() {
				if (Object.keys(this.detailData).length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/ticket/blockchain?item=' + encodeURIComponent(JSON.stringify(this.detailData))
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
		}
	}
</script>

<style lang="scss">
	.modal-content {
		width: 100%;
		max-height: 55vh;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.statusImg {
		position: absolute;
		top: 200rpx;
		right: 20rpx;
		transform: rotate(345deg);
	}

	.zhangImg {
		position: absolute;
		top: 540rpx;
		right: 40rpx;
		transform: rotate(345deg);
	}
	.sdImg{
		position: absolute;
		top: 250rpx;
		right: 40rpx;
		transform: rotate(345deg);
	}
	.bxImg{
		position: absolute;
		top: 420rpx;
		right: 40rpx;
		transform: rotate(345deg);
	}
	.saveBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0 40rpx 0;
	}

	.btnBox {
		width: 300rpx;
		margin: 0 30rpx;
	}

	.billView {
		position: relative;
		width: 100%;
		padding: 0 20rpx;
	}

	.billImageTop {
		margin-top: 27rpx;
		width: 100%;
		height: 136rpx;
		background-image: url('');
		background-size: 100%;
		display: flex;
		flex-direction: column;
		line-height: 136rpx;
		font-size: 36rpx;
		color: #a64f3f;
		text-align: center;
		border-bottom: 1rpx dashed #a64f3f;
	}

	.billImage {
		margin-top: 0;
		width: 100%;
		height: 585rpx;
		background-image: url('');
		background-size: cover;
		display: flex;
		flex-direction: column;
	}

	.billbgview {
		width: calc(100% - 80rpx);
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.totalView {
		width: 100%;
		height: 15%;
	}

	.leftView {
		display: flex;
		align-items: center;
		width: 100%;
		height: 13%;
		border-bottom: 1px solid #cdcdcd;
	}

	.leftText {
		width: 120rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.billvalue {
		display: flex;
		flex: 1;
		font-size: 26rpx;
		margin-left: 15px;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
	}

	.xuxianU {
		height: 5rpx;
		width: 100%;
	}

	.bottomView {
		width: 100%;
		height: 20rpx;
		background-color: rgba(246, 247, 249, 1);
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 120px;
		height: 120px;
	}

	//登录
	.blackView {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		height: 100rpx;
		background: rgba(0, 0, 0, 0.78);
		/*opacity:0.78;*/
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.blackText {
		margin-left: 36rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		flex-direction: row;
		flex: 1;
	}

	.loginBtn {
		width: 172rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #3765FF;
		border-radius: 28rpx;
		margin-right: 30rpx;
	}

	.loginText {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	/* 票据列表 */
	.bill-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		// gap: 24rpx;
	}

	.bill-item {
		margin: 12rpx 0;
		background-color: #F7F8FA;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s;
	}

	.bill-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.bill-title {
		font-size: 30rpx;
		font-weight: 600;
		background-color: rgba(134, 144, 156, 0.1);
		color: #86909C;
		padding: 6rpx 16rpx;
		border-radius: 8rpx;
	}

	.bill-info {
		display: flex;
		flex-direction: column;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.info-label {
		color: #86909C;
	}

	.info-value {
		// word-break: break-all;
		width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: end;
	}

	.total-row {
		padding-top: 20rpx;
		margin-top: 10rpx;
		border-top: 2rpx solid #f0f0f0;
	}

	.amount {
		color: #165DFF;
		font-weight: 600;
	}
</style>